<template>
  <!-- <a-row justify="center" :gutter="16">
    <a-col span="24"> </a-col>
  </a-row> -->
  <DutyMonthCalendar :groups="dutyData.groups" :schedules="dutyData.schedules" />
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, unref, computed } from 'vue';

  import { getDisplayCalendar } from '/@/api/duty/display'; // api
  import { DutyDisplayQueryConditionDto } from '/@/api/duty/model/displayModel';

  import DutyMonthCalendar from './DutyMonthCalendar.vue';

  // import { Dayjs } from 'dayjs';

  export default defineComponent({
    name: 'DutyCalendar',
    components: { DutyMonthCalendar },
    setup() {
      //设置使用中文，统一在src\locales\lang\zh_CN.ts中进行切换设置
      //Dayjs.locale('zh-cn');

      const dutyData = reactive({
        groups: {},
        schedules: {},
      });

      /**
       * 获取日历形式展示的值班表数据
       */
      function getDisplayCalendarData() {
        let queryConditionDto: DutyDisplayQueryConditionDto = {
          begintm: '2023-6-1',
          endtm: '2023-7-1',
          deptids: [1, 3, 4, 6],
        };
        getDisplayCalendar(queryConditionDto)
          .then((res) => {
            console.log('getDisplayCalendar res', res);
            dutyData.groups = res.groups;
            console.log('getDisplayCalendar  res.schedules', res.schedules);
            dutyData.schedules = res.schedules;
          })
          .catch((ex) => {
            console.log('getDisplayCalendar ex', ex);
          });
      }

      onBeforeMount(() => {
        getDisplayCalendarData();
      });

      return {
        dutyData,
      };
    },
  });
</script>
<style scoped lang="less"></style>
